<template>
  <div class="background-effects h-full">
    <div class="gradient-orb top-left"></div>
    <div class="gradient-orb bottom-right"></div>
    <div class="grid-overlay"></div>
  </div>
</template>

<style scoped>
  .background-effects {
    @apply absolute top-0 left-0 w-full h-full z-0 overflow-hidden;
  }
  
  .gradient-orb {
    @apply absolute w-[40vw] h-[40vw] rounded-full opacity-30;
    filter: blur(80px);
  }
  
  .top-left {
    @apply -top-[20vw] -left-[20vw];
    background: linear-gradient(45deg, #4A99E9, #5C2797);
  }
  
  .bottom-right {
    @apply -bottom-[20vw] -right-[20vw];
    background: linear-gradient(45deg, #5C2797, #4A99E9);
  }
  
  .grid-overlay {
    @apply absolute top-0 left-0 w-full h-full;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
  }
</style> 